<p-divider>
  <b>字段列表</b>
</p-divider>
<p-table [value]="fields"
  styleClass="p-datatable-sm field-list"
  [reorderableColumns]="true">
  <ng-template pTemplate="caption">
    <div class="flex align-items-center justify-content-between">
      <i class="pi pi-plus cursor-pointer	"
        title="添加"
        (click)="onAddFieldClick()"></i>
    </div>
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th></th>
      <th></th>
      <th>名称</th>
      <th>描述</th>
      <th>PLC地址</th>
      <th>类型</th>
      <th>操作</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body"
    let-field
    let-columns="columns"
    let-index="rowIndex">
    <tr [pReorderableRow]="index"
      title="{{field.Description}}"
      class="field-box w-full">
      <td>
        <span class="pi pi-bars"
          pReorderableRowHandle></span>
      </td>
      <td>
        <p-checkbox [(ngModel)]="field.Visible"
          [binary]="true"></p-checkbox>
      </td>
      <td>
        {{field.Name}}
      </td>
      <td>
        {{field.Description}}
      </td>
      <td>
        {{field.Address}}
      </td>
      <td>
        {{field.Type}}
      </td>
      <td>
        <i class="pi pi-file-edit mr-2 cursor-pointer	"
          title="修改"
          (click)="onEditField(field)"></i>
        <i class="pi pi-trash cursor-pointer"
          title="删除"
          (click)="onDeleteField(field)"></i>
      </td>
    </tr>
  </ng-template>
</p-table>

<app-field-map-setting-sidebar #settingSidebar
  (editConfirm)="onEditFieldMapConfirm($event)"></app-field-map-setting-sidebar>